<template>
    <view>
        <view class="text-center bg-white">
            <image class="cu-avatar round xl margin-top bg-white" :src="job?.logo" mode=""></image>
            <view class="margin text-lg text-bold">
                {{job?.companyName}}
            </view>
            <view class="">
                {{job?.workLocation}}
            </view>
        </view>
        <custom-tab></custom-tab>
        <view class="">
            <view class="padding bg-white">
                <view class="text-bold margin-bottom-sm">
                    岗位名称
                </view>
                <view class="text-gray">
                    {{job?.position}}
                </view>
            </view>
            <view class="padding bg-white">
                <view class="text-bold margin-bottom-sm">
                    薪资范围
                </view>
                <view class="text-gray">
                    {{job?.salary}}
                </view>
            </view>
            <view class="padding bg-white">
                <view class="text-bold margin-bottom-sm">
                    岗位要求
                </view>
                <view class="text-gray">
                    {{job?.jobRequirements}}
                </view>
            </view>
            <view class="padding bg-white">
                <view class="text-bold margin-bottom-sm">
                    公司福利
                </view>
                <view class="text-gray">
                    {{job?.welfare}}
                </view>
            </view>
            <view class="padding bg-white">
                <view class="text-bold margin-bottom-sm">
                    公司规模
                </view>
                <view class="text-gray">
                    {{job?.companySizeDetail}}
                </view>
            </view>
        </view>
        <view class="cu-bar foot bg-white">
            <button v-if="status==0" class="cu-btn bg-orange" @click="handleBaoMing">
                提交报名
            </button>
			<button v-if="status==1" class="cu-btn bg-gray">
			    提交成功
			</button>
			<button v-if="status==2" class="cu-btn bg-cyan">
			    简历已阅
			</button>
			<button v-if="status==3" class="cu-btn bg-blue">
			    预约面试
			</button>
			<button v-if="status==4" class="cu-btn bg-green">
			    准备入职
			</button>
			<button v-if="status==5" class="cu-btn bg-red">
			    呀屎啦雷
			</button>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { getJobDetail, postJoin, joinCheck } from '../../api/job';
import type { Ref } from 'vue';
import { ref, computed } from 'vue';
import type {JobType, JoinType} from '@/model/job'
import { useStore } from 'vuex';

const store = useStore()
// 携带岗位id 获取完整的岗位信息
const job = ref<JobType>(null)
onLoad(async(options)=>{
	let jobId = options?.id||'6895bcb8f900e66551961daa'
	let res = await getJobDetail(jobId)
	console.log(res);
	job.value = res.data
	
	// 2. 生命周期中初始化岗位报名状态
	let userId = uinfo.value.objectId
	let joinRes = await joinCheck(userId,jobId)
	console.log('报名状态查询结果',joinRes);
	if(joinRes.data.results.length!=0){
		status.value = joinRes.data.results[0].status
	}else{
		status.value = 0
	}
})

//报名
const uinfo = computed(()=>store.state.user.uinfo)
const status = ref<number>(-1)
const handleBaoMing = async ()=>{
    //判断用户是否登录
    if(!uinfo.value||!uinfo.value.objectId){
        uni.navigateTo({
            url:'/pages/login/login'
        })
        return
    }
    //拦截用户信息
    let {name,phone} = uinfo.value
    if(!name||!phone){
        await new Promise((resolve) => {
            uni.showModal({
                title:"信息不完善",
                content:"是否前往完善信息？",
                confirmColor:'#F37B1D',
                success:({confirm})=>{
                    if(confirm){
                        uni.navigateTo({
                            url:'/pages/mine/setting'
                        })
                    }
                    resolve(confirm)
                }
            })
        }).then((confirm) => {
            if (!confirm) {
                return
            }
        })
        // 如果用户点击取消，直接返回，不再执行后续报名逻辑
        if (!name || !phone) {
            return
        }
    }
    //提交报名
    let userId = uinfo.value.objectId
    let jobId = job.value.objectId
    let {logo,position,companyName,workLocation,salary} = job.value
    let res = await postJoin({
        userId,
        jobId,
        status:1,
        logo,
        position,
        companyName,
        workLocation,
        salary
    })
    console.log(res);
    if(res.data.objectId){
        status.value = 1
    }
}

</script>

<style lang="scss">
page{
	padding-bottom: 50px;
}
.selected {
  	// 这里可以自定义选中样式，例如添加背景色
	//background-color: aqua !important;
	border: 1upx solid orange !important;
} 
.cu-bar.foot button {
	width: 90%;
	margin-left: 5%;
}
</style>
